import { defineComponent, ref, watch } from 'vue'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()

    // 配置项
    let options = {}

    watch(
      () => props.cdata,
      (val: any) => {
        console.log(val)
        options = {
          title: {
            text: '竞赛学生请假出校流程',
            left: '4%',
            top: '0%',
            textStyle: {
              color: '#ffffff',
              fontSize: 20,
            }
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 97,
              color:'#21a675',
              roam: true,
              label: {
                show: true
              },
              edgeSymbol: ['none', 'arrow'],
              edgeSymbolSize: [10, 10],
              edgeLabel: {
                fontSize: 20
              },
              data: val.data,
              // links: [],
              links: val.links,
              lineStyle: {
                opacity: 1,
                color:"#21a675",
                width: 2,
                curveness: 0
              }
            }
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "520px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

